<template>
    <div class="container long-container wow animate__animated animate__fadeInUp" data-wow-duration="2s"
        data-wow-delay="0.2s">
        <h3 class="title">产品中心</h3>
        <!-- 产品图片区域  START -->
        <div class="row">
            <ul>
                <li v-for="p in productShow" :key="p.id">
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <div class="thumbnail long-thumbnail" @click="goProduct">
                            <img :src="p.imgUrl" :alt="p.name">
                            <h3>{{p.name}}</h3>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 产品图片区域  END -->
        <router-link class="more" to="/product">了解更多</router-link>
    </div>
</template>
<script>
    import { WOW } from 'wowjs'
    import "animate.css";
    import { useHomeStore } from "../../../store/home"  //引入home仓库
    import { storeToRefs } from 'pinia'  //引入方法让仓库里的值可以解构赋值并且具有响应式
    import { onMounted, nextTick } from "vue";
    import { useRouter } from 'vue-router'
    export default {
        name: "ProductCenter",
        setup() {
            const store = useHomeStore();
            const router = useRouter()

            onMounted(() => {
                //初始化wow.js(页面滚动加载动画)
                nextTick(() => {   //页面渲染完，在执行
                    let wow = new WOW({
                        live: false
                    })
                    wow.init()
                })
                //通知vuex发送请求获取产品中心的数据
                store.getProductShow();
            });
            //数据
            let { productShow } = storeToRefs(store) //从仓库获取数据

            //事件
            function goProduct() {//跳转到产品中心页面
                router.push('/product')
            }
            return {
                productShow,
                goProduct
            }
        }
    }
</script>
<style scoped>
    .long-container {
        margin-top: 80px;
        font-family: "Source Han Sans CN";
    }

    .long-container .title {
        font-size: 30px;
        font-weight: 500;
        text-align: center;
        color: #4F68AC;
        margin-bottom: 30px;
    }

    /* 产品图片区域  START*/
    .long-thumbnail {
        border: 1px solid #ffffff;
        overflow: hidden;
        border-top: 3px solid #4F68AC;
        border-radius: 0px;
        background-color: #f8f8f8;
        cursor: pointer;
        margin-top: 30px;
    }

    .long-thumbnail img {
        width: 320px;
        transition: transform 0.8s;
    }

    .long-thumbnail:hover img {
        transform: scale(1.15);
    }

    .long-thumbnail h3 {
        text-align: center;
        font-size: 20px;
        color: #4F68AC;
        margin: 40px 0px 30px;
    }

    /* 产品图片区域  END  */
    .long-container .more {
        height: 40px;
        line-height: 40px;
        width: 140px;
        text-align: center;
        display: block;
        margin: 50px auto 0px;
        border: 1px solid #999;
        background-color: #fff;
        font-size: 14px;
        color: #999;
        transition: background-color 0.5s ease;
    }

    .long-container .more:hover {
        text-decoration: none;
        background-color: #4F68AC;
        color: #fff;
    }
</style>